<!-- 表单组件 -->
<template>
    <!-- 加插槽 -->
	<el-table
		v-bind="getTableProps"
		v-loading="loading"
		:data="tableData"
		:header-cell-style="headerStyle"
		:row-class-name="rowClassName"
		@selection-change="handleSelectionChange"
	>
		<!-- 可选选择框列 -->
		<el-table-column v-if="selection" align="center" type="selection" />
		<!-- 可选序号列 -->
		<el-table-column v-if="showIndex" align="center" type="index" :label="indexLabel" :width="indexWidth" />
		<!-- 动态列渲染 -->
		<template v-for="col in columns" :key="col.prop">
			<el-table-column
				:prop="col.prop"
				:label="col.label"
				:width="col.width"
				:min-width="col.minWidth"
				:align="col.align || 'left'"
				:fixed="col.fixed"
			>
				<!-- 作用域插槽 -->
				<template #default="scope">
					<slot :name="col.prop" v-bind="scope">
						<!-- 默认内容处理 -->
						<template v-if="col.formatter">
							{{ col.formatter(scope.row) }}
						</template>
						<template v-else>
							{{ scope.row[col.prop] }}
						</template>
					</slot>
				</template>
			</el-table-column>
		</template>

		<!-- 操作列插槽 -->
		<el-table-column v-if="$slots.actions" :label="actionLabel" :width="actionWidth">
			<template #default="scope">
				<slot name="actions" v-bind="scope"></slot>
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup lang="ts">
import { computed, type CSSProperties, type PropType } from 'vue';
interface TableColumn{
    prop: String
    label: String
    width?: String | number
    minWidth?: String | number
    align?: 'left' | 'center' | 'right'
    fixed?: 'left' | 'right'
    formatter?: (row: any) => string,
    children?: TableColumn[]  //多表头
}
const props = defineProps({
    // 表格数据
    tableData: {
        type: Array as PropType<any[]>,
        required: true,
    },

    loading: {
        type: Boolean,
        default: false,
    },

    // 列配置
    columns: {
        type: Array as PropType<TableColumn[]>,
        required: true,
    },

    // 是否显示选择框
    selection: {
      type: Boolean,
      default: false,
    },

    // 是否显示序号列
    showIndex: {
        type: Boolean,
        default: true,
    },

    // 是否显示序号列
    indexLabel: {
        type: String,
        default: "序号",
    },

    indexWidth:{
        type: [String, Number],
        default: 60,
    },

    // 操作列配置
    actionLabel: {
        type: String,
        default: '操作',
    },
    actionWidth: {
        type: [String,Number],
        default: 150,
    },

    // 样式配置
    headerStyle:{
        type: Object as PropType<CSSProperties>,
        default:()=>({}) //backgroundColor: '#fff'
    },
    rowClassName: {
        type: Function as PropType<(row:any)=>string>,
        default: () => ''
    }
})

const emit = defineEmits<{
    (e: 'selection-change', selection: any[]): void
}>()

// 合并 el-table 的默认 props
const getTableProps = computed(() => ({
  border: false,  //表格边框
  stripe: true,
  ...props.$attrs
}))

//选择框
const handleSelectionChange =  (selection: []) => {
  emit('selection-change', selection)
}
</script>

<style scoped lang="scss"></style>
